<template>
	<scroll-page background-color="#F6F7F9">
		<view class="my-page">
			<!-- 用户资料（头像&昵称） -->
			<view class="user-profile">
				<image
					class="user-avatar"
					src="/static/uploads/doctor-avatar.jpg"
				></image>
				<view class="user-info">
					<text class="nickname">用户907456</text>
					<text class="iconfont icon-edit"></text>
				</view>
			</view>
			<!-- 用户数据 -->
			<view class="user-data">
				<navigator hover-class="none" url="">
					<text class="data-number">150</text>
					<text class="data-label">收藏</text>
				</navigator>
				<navigator hover-class="none" url="">
					<text class="data-number">23</text>
					<text class="data-label">关注</text>
				</navigator>
				<navigator hover-class="none" url="">
					<text class="data-number">230</text>
					<text class="data-label">积分</text>
				</navigator>
				<navigator hover-class="none" url="">
					<text class="data-number">3</text>
					<text class="data-label">优惠券</text>
				</navigator>
			</view>

			<!-- 问诊医生 -->
			<custom-section
				:custom-style="{ paddingBottom: '20px' }"
				title="问诊中"
			>
				<swiper
					class="uni-swiper"
					indicator-active-color="#2CBSA5"
					indicator-color="#EAF8F6"
					indicator-dots
				>
					<swiper-item>
						<view class="doctor-brief">
							<image
								class="doctor-avatar"
								src="/static/uploads/doctor-avatar.jpg"
							/>
							<view class="doctor-info">
								<view class="meta">
									<text class="name">王医生</text>
									<text class="title"
										>内分泌科 | 主任医师</text
									>
								</view>
								<view class="meta">
									<text class="tag">三甲</text>
									<text class="hospital">积水潭医院</text>
								</view>
							</view>
							<navigator
								class="doctor-contcat"
								hover-class="none"
								url=""
							>
								进入咨询
							</navigator>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="doctor-brief">
							<image
								class="doctor-avatar"
								src="/static/uploads/doctor-avatar.jpg"
							/>
							<view class="doctor-info">
								<view class="meta">
									<text class="name">王医生</text>
									<text class="title"
										>内分泌科 | 主任医师</text
									>
								</view>
								<view class="meta">
									<text class="tag">三甲</text>
									<text class="hospital">积水潭医院</text>
								</view>
							</view>
							<navigator
								class="doctor-contcat"
								hover-class="none"
								url=""
							>
								进入咨询
							</navigator>
						</view>
					</swiper-item>
				</swiper>
			</custom-section>
			
			<!-- 药品订单 -->
			<custom-section show-arrow title="药品订单">
			  <template #right>
			    <navigator hover-class="none" url="">
			      全部订单
			    </navigator>
			  </template>
			  <view class="drug-order">
			    <navigator hover-class="none" url="">
			      <uni-badge :text="0" :offset="[3, 3]" absolute="rightTop">
			        <image 
			          src="/static/images/order-status-1.png"
			          class="status-icon"
			        />
			      </uni-badge>
			      <text class="status-label">待付款</text>
			    </navigator>
			    <navigator hover-class="none" url="">
			      <uni-badge text="2" :offset="[3, 3]" absolute="rightTop">
			        <image 
			          src="/static/images/order-status-1.png"
			          class="status-icon"
			        />
			      </uni-badge>
			      <text class="status-label">待付款</text>
			    </navigator>
			  </view>
			</custom-section>
			
			<!-- 快捷工具 -->
			<custom-section title="快捷工具">
			  <uni-list :border="false">
			    <uni-list-item
			      :border="false"
			      title="我的问诊"
			      show-arrow
			      show-extra-icon
			      :extra-icon="{
			        customPrefix: 'icon-symbol',
			        type: 'icon-symbol-tool-01',
			      }"
			    />
			    <uni-list-item
			      :border="false"
			      title="我的处方"
			      show-arrow
			      show-extra-icon
			      :extra-icon="{
			        customPrefix: 'icon-symbol',
			        type: 'icon-symbol-tool-02',
			      }"
			    />
			    <uni-list-item
			      :border="false"
			      title="家庭档案"
			      show-arrow
				  to="/subpkg_archive/form/index"
			      show-extra-icon
			      :extra-icon="{
			        customPrefix: 'icon-symbol',
			        type: 'icon-symbol-tool-03',
			      }"
			    />
			    <uni-list-item
			      :border="false"
			      title="地址管理"
			      show-arrow
			      show-extra-icon
			      :extra-icon="{
			        customPrefix: 'icon-symbol',
			        type: 'icon-symbol-tool-04',
			      }"
			    />
			    <uni-list-item
			      :border="false"
			      title="我的评价"
			      show-arrow
			      show-extra-icon
			      :extra-icon="{
			        customPrefix: 'icon-symbol',
			        type: 'icon-symbol-tool-05',
			      }"
			    />
			    <uni-list-item
			      :border="false"
			      title="官方客服"
			      show-arrow
			      show-extra-icon
			      :extra-icon="{
			        customPrefix: 'icon-symbol',
			        type: 'icon-symbol-tool-06',
			      }"
			    />
			    <uni-list-item
			      :border="false"
			      title="设置"
			      show-arrow
			      show-extra-icon
			      :extra-icon="{
			        customPrefix: 'icon-symbol',
			        type: 'icon-symbol-tool-07',
			      }"
			    />
			  </uni-list>
			</custom-section>
			
			<view class="logout-button" @click="onLogouClick">退出登录</view>

		</view>
	</scroll-page>
</template>

<script setup>
import { ref } from 'vue';
import {userInfoApi} from '@/services/user.js'
import { useUserStore } from '@/stores/user.js'


const userStore = useUserStore()


	const userInfo = ref()
	async function getUserInfo() {
		const res  = await userInfoApi()
		console.log(res);
	}
	// getUserInfo()
	
function onLogouClick() {
	// 清除
	userStore.token = ''
	userStore.openType = 'switchTab'
	userStore.redirectURL = '/pages/index/index'
	// reLaunch表示清空所有的页
	uni.reLaunch({
		url: '/pages/login/index'
	})
}
</script>



<style lang="scss">
	@import './index.scss';
</style>
